<template>
    <h1>{{ str }}</h1>
    <h3>我的商品数量为：{{ num }}</h3>
    <button v-on:click="num=num + 1">商品加+1</button>
    <button v-on:click="addFn">商品++</button>
    <button v-on:click="addCount(5)">每次商品+5</button>
    <button @click="subFn">每次减 1</button> <br>
    <br>
    <!--默认操作-->
    <a href="http://www.jd.com" @click="one">阻止去京东</a> &nbsp; &nbsp;
    <a href="http://www.baidu.com" @click="two(10, $event)">阻止去百度</a>
<br>
<!--动态参数传递-->
<span v-bind:[attributeName]="id"> v-bind 绑定事件</span>
<button @click="attributeName='class'">点击改变class样式</button>
</template>
<script setup>
// v-on  是事件的绑定 点击事件 触发事件 click

import { ref } from 'vue';

// v-on:事件名="方法名"  v-on:clcik="方法名（实参）"
const str = "校园超市"
const num = ref(0)
// 原始函数应用的比较少
function addFn() { 
    num.value++
}
const addCount = (count) => { 
    console.log(count);
  num.value = num.value + count
  
}
const subFn = () => { 
    num.value --
}
const one = (e) => { 
    console.log(e);
    e.preventDefault() //阻止默认行为
}
const two = (count, e) => { 
    // 输出 count 值
    console.log(count);
    
    // 阻止默认行为
    e.preventDefault() //阻止默认行为
    // 更新 num 的值为原来的值加上 count
    num.value = num.value + count
    
}

const id = ref('d1')
const attributeName = ref('id')

</script>
<style scoped>

#d1{
   color: red; 
}
.d1{
    font-size: 19px;
    font-weight: 700;
    color: brown;
}
</style>